<template>
    <div class="login_back">
        <div class="login_container">
            <h1 class="title">Vivid快速开发平台</h1>
            <el-form :model="loginForm" label-width="auto" >
                <el-form-item >
                    <el-input v-model="loginForm.username" placeholder="Please input username"/>
                  </el-form-item>
                  <el-form-item >
                    <el-input v-model="loginForm.password"  type="password"
                    placeholder="Please input password" />
                  </el-form-item>

              </el-form>
              <el-button type="primary" @click="submitLogin">登录</el-button>
        </div>
       
    </div>
</template>
<script setup>
    import { ref } from  'vue';
    
    import {login} from '@/api/sys/index.js'
    import { getToken, setToken } from '@/utils/token';
    import { useRouter } from 'vue-router';
    import { menuList } from '@/api/sys/menu';
    // 引入vue-router


    // // 构建store
    // const menuStore = useMnuStore();
    // const userStore = useUserStore();
    const router = useRouter();
    // 声明表单绑定值
    const loginForm = ref({
        username: undefined,
        password: undefined,
        //rememberMe: undefined
    })

    function submitLogin(){
        login(loginForm.value).then((res)=>{
            console.log(res.data.data)
                if(res.data.code === 200){
                    setToken("vividToken",res.data.data);
                    menuList().then((res)=>{
                        console.log(res.data)
                    })
                    router.push("index")
                }
        })
    }

</script>

<style lang="scss" scoped>
.login_back{
    background-image: url('../assets/bckimg/bcgrd.jpg') ;
    background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     height: 100vh; /* Full height of the viewport */
     width: 100vw; /* Full width of the viewport */
     position: fixed; /* Position relative to the viewport */
     top: 0;
     left: 0;
    z-index: 1; /* Send the background to the back */
 
    .login_container{
         right: 0;
         display: flex;
         position: absolute;
         justify-content: center;
         align-items: center;
         //设置换行
         flex-direction: column;
         height: 100vh;
         width: 50%;
         background-color: #8f9ad6;
         z-index: 10
    }
}
.el-form {
    width: 60%;
}
.el-form-item {
    width: 100%;
}
</style>